/**
 * Created by Administrator on 2016/3/12.
 */
;
(function ($) {

    $.fn.qrLayer = function (options) {
        var _this = this;
        this.each(function () {

            _this.settings = this.settings = $.extend({}, $.fn.qrLayer.defaults, options);

            var $element = $(this), $overlayContainer = $("div.maskLayer-container"),
                $overlay = $overlayContainer.find('.maskLayer-overlay');

            if ($overlayContainer.length == 0) {
                $overlayContainer = createContainer($element);
            }
            if ($overlay.length == 0) {
                $overlay = createOverlay(this, $element);
                $overlayContainer.html($overlay);
            }

            showLayer($overlayContainer, $overlay, 999, {tip: ""});

            $(window).resize(function () {
                updateContainer($element, $overlayContainer);
            });

            $(window).scroll(function () {
                updateContainer($element, $overlayContainer);
            });

        });

        function showLayer($overlayContainer, $overlay, zIndex, options) {
            $overlayContainer.css({
                zIndex: Math.abs(zIndex)
            });
            if ($overlay.length > 0) {
                $(".error-tip", $overlay).html(options.tip || $.fn.qrLayer.defaults.tip);
                $overlay.show();
            }
        }

        function hideLayer($overlayContainer, $overlay, zIndex, options) {
            $overlayContainer.css({
                zIndex: -Math.abs(zIndex)
            });
            if ($overlay.length > 0) {
                $(".error-tip", $overlay).html(options.tip || $.fn.qrLayer.defaults.tip);
                $overlay.hide();
            }
        }

        return {
            options: _this.settings,
            showOverLayer: function (options) {

                var $overlayContainer = $("div.maskLayer-container");
                if ($overlayContainer.length > 0) {
                    var $overlay = $overlayContainer.find('.maskLayer-overlay');
                    if ($overlay.length > 0) {
                        showLayer($overlayContainer, $overlay, $overlayContainer.css("zIndex"), options);
                    }
                }

            },
            removeOverLayer: function () {

                var $overlayContainer = $("div.maskLayer-container");
                if ($overlayContainer.length > 0) {
                    var $overlay = $overlayContainer.find('.maskLayer-overlay');
                    if ($overlay.length > 0) {
                        hideLayer($overlayContainer, $overlay, $overlayContainer.css("zIndex"), {tip: ""});
                    }
                }

            }
        };
    };

    $.fn.qrLayer.defaults = {
        show: true,
        tip: '加载中...',
        duration: 'fast',
        fontColor: '#fff',
        letterSpacing: '2px',
        lineHeight: '17pt',
        textAlign: 'center',
        verticalMiddle: true,
        backgroundColor: 'black',
        opacity: 0.8,
        height: '100%',
        withLink: false,
        withLinkHref: '#',
        withClick: false,
        withClickEvent: function () {
        },
        titleStyle: false
    };

    function createContainer($element) {

        var top = $element.offset().top,
            left = $element.offset().left,
            width = $element.outerWidth(),
            height = $element.outerHeight();
        var zIndex = $element.css("z-index");
        var $overlayContainer = $('<div>').addClass('maskLayer-container').css({
            width: width,
            height: height,
            position: 'absolute',
            overflow: 'hidden',
            top: top,
            left: left,
            borderRadius: $element.css('border-radius'),
            zIndex: zIndex == +zIndex ? (zIndex + 1) : 999
        });

        $('body').append($overlayContainer);

        return $overlayContainer;
    }

    function updateContainer($element, $overlayContainer) {

        var top = $element.offset().top,
            left = $element.offset().left,
            width = $element.outerWidth(),
            height = $element.outerHeight();
        var zIndex = $element.css("zIndex");
        $overlayContainer.css({
            width: width,
            height: height,
            position: 'absolute',
            overflow: 'hidden',
            top: top,
            left: left,
            borderRadius: $element.css('border-radius'),
            zIndex: zIndex == +zIndex ? (zIndex + 1) : 999
        });

        return $overlayContainer;
    }

    function createOverlay(instance, $element) {

        var bottom = 0, left = 0, $overlay, content;

        if (instance.settings.verticalMiddle) {
            if (instance.settings.titleStyle) {
                content = $('<div>').css({
                    color: instance.settings.fontColor,
                    display: 'table-cell',
                    fontSize: '12px',
                    fontWeight: 'bold',
                    verticalAlign: 'middle'
                }).addClass("error-tip").html(instance.settings.tip);
            } else {
                content = $('<div>').css({
                    color: instance.settings.fontColor,
                    display: 'table-cell',
                    verticalAlign: 'middle',
                    fontSize:'12px'
                }).addClass("error-tip").html(instance.settings.tip);
            }
        } else {
            content = instance.settings.tip;
        }

        if (instance.settings.withLink) {
            var url = instance.settings.withLinkHref;
            $overlay = $('<a>').addClass('maskLayer-overlay').css({
                textDecoration: 'none'
            }).attr('href', url || '#');
        }
        if (instance.settings.withClick) {
            $overlay = $('<div>').addClass('maskLayer-overlay').css({
                cursor: 'pointer'
            });
            $overlay.on("click", function () {
                instance.settings.withClickEvent();
            });
        } else {
            $overlay = $('<div>').addClass('maskLayer-overlay');
        }

        $overlay.css({
            width: '100%',
            height: instance.settings.height,
            position: 'absolute',
            left: left,
            bottom: bottom,
            display: instance.settings.verticalMiddle ? 'table' : 'inline',
            textAlign: instance.settings.textAlign,
            color: instance.settings.fontColor,
            lineHeight: instance.settings.lineHeight,
            letterSpacing: instance.settings.letterSpacing,
            opacity: instance.settings.opacity,
            verticalAlign: 'middle',
            backgroundColor: instance.settings.backgroundColor
        }).append(content);

        return $overlay;
    }

})(jQuery);